<template>
    <div class="invite-manager">
      <h2>邀请码管理</h2>
      
      <!-- 输入邀请码 -->
      <div class="input-section">
        <h3>输入邀请码</h3>
        <form @submit.prevent="submitInviteCode">
          <el-input
            v-model="inputCode"
            placeholder="请输入四位邀请码"
            maxlength="4"
            clearable
            class="input-field"
          />
          <el-button type="primary" @click="submitInviteCode" class="submit-button">提交</el-button>
          <p :class="{'message': true, 'error': isError, 'success': !isError}">{{ responseMessage }}</p>
        </form>
      </div>
  
      <!-- 生成二维码 -->
      <div class="qr-section">
        <h3>生成二维码</h3>
        <el-button @click="handleSendQR" class="generate-button">分享二维码</el-button>
        <div v-if="qrCodeDataUrl" class="qr-container">
          <img :src="qrCodeDataUrl" alt="二维码" />
          <p class="invite-code">邀请码：{{ inviteCode }}</p>
        </div>
      </div>
    </div>
  </template>
  
  
  <script>
import QRCode from 'qrcode';
import $axios from '@/api/request';
import axios from 'axios';
export default {
  data() {
    return {
      inputCode: '',           // 用户输入的邀请码
      qrCodeDataUrl: '',       // 存储二维码的 Data URL
      inviteCode: '',          // 存储生成的邀请码
      responseMessage: '',     // 响应消息
      isError: false           // 是否显示错误消息
    };
  },
  methods: {
    async submitInviteCode() {
  if (this.inputCode.length !== 4) {
    this.responseMessage = '邀请码必须为四位';
    this.isError = true;
    return;
  }
  const token = localStorage.getItem('token');
  try {
    const response = await $axios.get('http://localhost:8080/api/addToken', {
      headers: {
        Authorization: `Bearer ${token}`
      },
      params: {
        code: this.inputCode
      }
    });
    if (response.code === 400) {
        this.$message.error(response.msg);
    }else{
        this.$message.success(response.msg);
    }
    this.responseMessage = response.data.message;
    this.isError = response.data.code !== 200;
  } catch (error) {
    this.responseMessage = '请求失败，请稍后重试';
    this.isError = true;
  }
},
async handleSendQR() {
  const token = localStorage.getItem('token');
  try {
    // 请求生成邀请码和链接，添加 Authorization 头部
    const response = await axios.get('http://localhost:8080/api/generate-invite-code', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    const { inviteCode, link } = response.data;
    this.inviteCode = inviteCode;
    
    // 生成二维码
    QRCode.toDataURL(link, (err, url) => {
      if (err) {
        console.error(err);
        return;
      }
      this.qrCodeDataUrl = url;
    });
  } catch (error) {
    console.error('Error generating QR code and invite code:', error);
  }
}
  }
};
</script>
  
  <style scoped>
.invite-manager {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.input-section, .qr-section {
  margin-bottom: 30px;
}

.input-field {
  width: calc(100% - 90px);
  margin-right: 10px;
}

.submit-button, .generate-button {
  margin-top: 10px;
}

.qr-container {
  text-align: center;
}

.qr-container img {
  max-width: 100%;
  height: auto;
}

.message {
  margin-top: 10px;
  text-align: center;
}

.message.error {
  color: red;
}

.message.success {
  color: green;
}

.invite-code {
  margin-top: 10px;
}
</style>
